<template>
  <el-form class="add-event-rotate3d">
    <el-button type="primary"  @click.stop="onAddItem" class="margin-bottom-10 margin-left-right-16"><el-icon><i class="jy-icon-plus"></i></el-icon>增加内容</el-button>
    <el-collapse v-model="activeNames">
      <el-collapse-item v-for="(item, index) in lists" :key="index" :name="index+1" class="list-group-item">
        <template #title>
          第{{index+1}}个图片<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteItem(index)"></i>
        </template>
        <add-img-con :url="item.url" picAttr="url" :index="index" :height="100" :isCrop='true' class="margin-left-right-16"></add-img-con>
        <input-normal label="图片地址" v-model="item.url" @change="onUpdateItem(index)"></input-normal>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script setup lang="ts">
import { useWebComponentStore } from "@/store/web/component"
import { ROTATE3D_LIST } from '@/const/web/'
import { ComponentTypesDefaultDom } from '@/store/models/component-default-data'

const props = defineProps<{ 
  event: IEvent,
  index: number,
}>()

const useWebComponent = useWebComponentStore()
const event = props.event
const activeNames = [1]
const lists = computed(() => {
  return useWebComponent.currentComponentData!.lists
})
const onAddItem = () => {
  let item: any
  const componentData = useWebComponent.currentComponentData
  if(componentData!.events.rotate3d) {
    item = _.cloneDeep(ROTATE3D_LIST[0])
  }else{
    item = _.cloneDeep(ComponentTypesDefaultDom[componentData!.cid].lists[0])
  }
  if(componentData!.lists && componentData!.lists[0]) {
    item = _.cloneDeep(componentData!.lists[0])
  }
  if(item) {
    useWebComponent.addComponentItem(item)
  }
}
const onUpdateItem = (index: number) => {
  const componentData = useWebComponent.currentComponentData
  useWebComponent.updateComponentItem({ index, item: componentData!.lists[index] })
}
const onDeleteItem = (index: number) => {
  useWebComponent.deleteComponentItem({index})
}
</script>